// let option = {
//     root: document.body,
//     rootMargin: '10px',
//     threshold: '1.0',
// }
// let io = new IntersectionObserver((entries, self) => {

//     console.log(entries, "这是？")
//     entries.forEach((item, index) => {
//         console.log(item.isIntersecting, "");
//         if (item.isIntersecting) {
//             item.target.classList.add('show')
//         } else {

//         }
//     })


// }, option)


// box_list.forEach(box => {
//     // 开始观察
//     io.observe(box)
// })




let box_list = document.querySelector('.box_list')

// 防抖
function debounce(fn, time = 500) {
    let t = null
    return function() {
        if (t) {
            clearTimeout(t)
        }

        t = setTimeout(() => {
            fn.apply(this, arguments)
        }, time)
    }
}

// 检测box是否已到底部 显示或隐藏box
function checkBox() {
    let box_items = document.querySelectorAll('.box')

    const triggerBottom = window.innerHeight / 5 * 4
    box_items.forEach(box => {
        let top = box.getBoundingClientRect().top
        if (top <= triggerBottom) {

            box.classList.add('show')

        } else {
            box.classList.remove('show')
        }
    })
}

checkBox()

// 距离底部还有多少距离 加载更多
let dir = 100
    // 滚动监听
window.addEventListener('scroll', debounce(() => {
    //页面高度
    let page_height = document.body.scrollHeight
        // 滚动条距离顶部的距离
    let scrollTop = window.scrollY

    // 浏览器的高度
    let window_height = window.innerHeight

    // 距离底部的距离
    let bottom_px = page_height - window_height - scrollTop

    if (bottom_px <= dir) {
        console.log("拉开距离", bottom_px);
        loadMore()
    }

    checkBox()
}), 100)

// 添加更多box
function loadMore() {
    let box = document.createElement('div')
    box.classList.add('box')
    box.innerText = 'content'
    box_list.append(box)
}